<template>
	<view class="container">
		<tn-nav-bar :isBack="true" backgroundColor="#3A87FF" class="tatils">我的分销</tn-nav-bar>
		<view
			:style="'background-color: #3A87FF;background-size: cover;background-position: center;background-repeat: no-repeat;padding-top:'+vuex_custom_bar_height+'px'">
			<view style="padding-top: 10px;padding-bottom: 30px;">
				<view style="overflow: hidden;display: block;padding-top: 20px;width: 80%;margin: 0 auto;">
					<view v-if="uinfo.nickname" style="width: 20%;float: left;padding: 5px;" @click="goLogin">
						<view class="cts" :style="{'background-image': 'url('+uinfo.avatarUrl+')'}"></view>
					</view>
					<view v-if="!uinfo.nickname" style="width: 20%;float: left;padding: 5px;" @click="goLogin">
						<view class="cts"
							:style="{'background-image': 'url(https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132)'}">
						</view>
					</view>
					<view style="width: 80%;float: left;padding: 5px;padding-left: 20px;padding-top: 5px;">
						<view style="height: 30px;line-height: 30px;">
							<text @click="goLogin"
								style="font-size: 16px;font-weight: 600;color: #fff;">{{uinfo.nickname==null?'立即登录 >':uinfo.nickname}}</text>
							<text v-if="uinfo.nickname"
								style="background-color: #FBE354;color: #0F5E8E;font-size: 11px;border-radius: 20px;margin-left: 5px;font-weight: 600;padding: 2px 8px 2px 8px;">VIP1</text>
						</view>
						<view v-if="!uinfo.nickname"
							style="height: 30px;line-height: 30px;font-size: 13px;font-weight: 600;color: #fff;">
							点击登录
						</view>
						<view v-if="uinfo.nickname"
							style="height: 30px;line-height: 30px;font-size: 13px;font-weight: 600;color: #fff;">
							推荐人数：0
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="about-shadow" style="height: 34px;background-color: #ffffff;border-radius: 20px;
			width: 60%;margin: 0 auto; margin-top: -15px;overflow: hidden;">
			<view
				style="width: 50%;float: left;text-align: center;height: 34px;line-height: 34px;border-right: 1px solid #e6e6e6;">
				佣金
			</view>
			<view @click="got('/pages/fx/fxlist')" style="width: 50%;float: left;text-align: center;height: 34px;line-height: 34px;">
				200
			</view>
		</view>

		<view class="about-shadow" style="height: 80px;background-color: #ffffff;border-radius: 5px;
			width: 96%;margin: 0 auto; margin-top: 5px;overflow: hidden;padding: 10px;">
			<view @click="show = true" style="width: 50%;float: left;text-align: center;border-right: 1px solid #e6e6e6;">
				<view  style="text-align: center;font-size: 40px;"><text class="tn-icon-qr-code"></text></view>
				<view  style="text-align: center;">推荐二维码</view>
			</view>
			<view @click="got('/pages/fx/xtdlist')" style="width: 50%;float: left;text-align: center;">
				<view  style="text-align: center;font-size: 40px;"><text class="tn-icon-team"></text></view>
				<view style="text-align: center;">我的团队</view>
			</view>
		</view>
		<view class="about-shadow" style="height: 120px;background-color: #ffffff;border-radius: 5px;
			width: 96%;margin: 0 auto; margin-top: 5px;overflow: hidden;padding: 10px;color: #989898;line-height: 22px;">
			<text>本公司生产销售三元催化回收等,还有更多三元催化回收相关的最新专业产品参数、实时报价、市场行情、优质商品批发、供应厂家等信息。</text>
		</view>
			<tn-popup v-model="show" mode="center" length="60%" width="600rpx" zoom closeBtn :borderRadius="20">
				  <view style="background-color: #e7e7e7;padding: 10px;">
					  <view style="height: 30px;line-height: 30px;text-align: center;font-size: 16px;font-weight: 600;">推荐二维码</view>
					  <view style="height: 260px;width: 260px;padding: 20px;margin: 0 auto;">
						  <image style="height: 100%;width: 100%;" :src="srcs"></image>
					  </view>
				  </view>
			</tn-popup>
	</view>
</template>

<script>
	import {getToken,setToken,removeToken,getLogins} from '@/utils/auth';
	export default {
		data() {
			return {
				uinfo: '',
				show:false,
				srcs:'https://resource.tuniaokj.com/images/swiper/spring.jpg'
			};
		},
		onLoad() {
			getLogins()
			this.uid = uni.getStorageSync('uid');
			this.uinfo = uni.getStorageSync('uinfo');
		},
		methods:{
			got(e){
				uni.navigateTo({
					url:e
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tatils {
		color: #fff;
	}

	.container {
		background-color: #f1f1f1;
		min-height: 100vh;
	}

	.cts {
		width: 120rpx;
		height: 120rpx;
		background-size: cover;
		border-radius: 100%;
	}

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}
</style>